<%--
  Created by IntelliJ IDEA.
  User: TLY
  Date: 2022/12/8
  Time: 11:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="./common/taglibs.jsp" %>
${jquery_js}
${validate_jquery_js}


<html>
<head>
    <title>理发店业务管理系统</title>
    <link type="text/css" rel="stylesheet" href="${ctx}/css/style.css"/>
    <%-- <script type="text/javascript" src="${ctx}/scripts/index.js"></script>--%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
    <style>
        label{
            color:red
        }
    </style>

</head>
<body>
<div id="header" class="wrap">

    <div class="navbar">
        <ul class="clearfix">
            <li><a href="${ctx}/index.jsp">首页</a></li>
            <li><a href="${ctx}/user/getpageusers">会员管理</a></li>
            <li><a href="${ctx}/staff/getstaffs">职工管理</a></li>
            <li class="current"><a href="${ctx}/order/getorders">订单管理</a></li>
        </ul>
    </div>
</div>
<div id="childNav">
    <div class="welcome wrap">
        管理员${admin.name}您好，欢迎回到管理后台。
    </div>
</div>

<div id="main" class="wrap">
    <div id="menu-mng" class="lefter">
        <div class="box">
            <dl>
                <%--     <dt><a href="${ctx}/user/getpageusers">会员管理</a></dt>
                     <dd><em></em><a href="${ctx}/user/adduser">新增会员</a></dd>
                     <dt>职工管理</dt>
                     <dd><em></em><a href="${ctx}/pageproductclass">新增职工</a></dd>--%>
                <dt>订单管理</dt>
                <dd><em></em><a href="${ctx}/order/addorder">新增订单</a></dd>
            </dl>
        </div>
    </div>
    <div class="main">
        <h2>添加订单</h2>
        <div class="manage">
            <form action="#" id="myform">
                <table id="mytable" class="list">

                    <tr class="mytr">
                        <td class="field">请输入会员id：</td>
                        <td ><input type="text" name="userid" id="userid" required/>

                        </td>
                        <td>
                            <input type="button" name="button" value="追加消费" onclick="addchoice()"/>
                            <input type="button" name="button" value="撤销消费" onclick="delchoice()"/>

                        </td>

                    </tr>


                    <tr id="hidfirsttr" hidden>
                        <td class="first  myfield" width="130px" height="95px">选择消费项目：
                            <br>

                            <select name="skillid" onchange="change(this)" required>
                                <option value="">请选择</option>
                                <c:forEach items="${skills}" var="i">
                                    <option value="${i.skillid}">${i.skillname}&nbsp; <span>${i.price}元</span></option>
                                </c:forEach>
                            </select>

                        </td>
                        <td class="w4">
                            选择职工:
                            <br>
                            <select name="staffid">
                                <option value="">请选择</option>
                                <c:forEach items="${staffs}" var="i">
                                    <option value="${i.staffid}">${i.staffname}</option>
                                </c:forEach>

                            </select>
                        </td>

                        <td class="field">价格: <span>0</span>元

                        </td>
                    </tr>


                    <tr id="firsttr">
                        <td class="first  myfield" width="130px" height="95px">选择消费项目：
                            <br>
                            <select name="skillid" onchange="change(this)" required>
                                <option value="">请选择</option>
                                <c:forEach items="${skills}" var="i">
                                    <option value="${i.skillid}">${i.skillname} <span&nbsp;&nbsp;&nbsp;
                                            hidden>${i.price}元</span></option>
                                </c:forEach>


                            </select>

                        </td>
                        <td class="w4">
                            选择职工:
                            <br>
                            <select name="staffid">
                                <option value="">请选择</option>
                                <c:forEach items="${staffs}" var="i">
                                    <option value="${i.staffid}">${i.staffname}</option>
                                </c:forEach>

                            </select>
                        </td>

                        <td class="field">价格: <span>0</span>元

                        </td>

                    </tr>


                    <tr id="lasttr">
                        <td class="c"> 总价<span id="cost">0</span>元</td>
                        <td> 是否支付：&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            <br>
                            <input type="radio" value="0" name="ispayment" checked>未支付
                            <input type="radio" value="1" name="ispayment">已支付

                        </td>

                        <td><label class="ui-blue"><input type="button" name="button" id="btn" value="添加"/></label></td>
                    </tr>
                </table>


            </form>
        </div>
    </div>
    <div class="clear">

    </div>

</div>

<div id="footer">
    安徽大学江淮学院 2019级 计算机科学与技术专业 陶龙宇 学号JB194033
</div>
<script type="text/javascript">
    $(function () {

        $("#btn").click(function () {
            if ($("#myform").valid()) {
                var skillids = []
                $("select[name='skillid']").each(function (j, item) {
                    skillids.push(document.getElementsByName("skillid")[j].value);
                });

                var staffids = [];
                $("select[name='staffid']").each(function (j, item) {
                    staffids.push(document.getElementsByName("staffid")[j].value);
                });

                var userid = $("#userid").val()

                var ispayment = $("input[name='ispayment']:checked").val()
                var totalprice = parseInt(document.getElementById("cost").textContent)


                $.ajax({
                    url: "${ctx}/order/doaddorder",
                    type: "post",
                    traditional: true,
                    data: {
                        "skillids": skillids,
                        "staffids": staffids,
                        "cost": totalprice,
                        "userid": userid,
                        "ispayment": ispayment
                    },
                    dataType: "json",
                    success: function (result) {
                        alert(result.msg)
                        if (result.code == 10000) {

                            location.href = "${ctx}/order/getorders";
                        }
                    },
                    error: function () {
                        alert("请联系管理员")
                    },


                })


            }else {
                alert("有选项未选择，请检查")
            }


        })


        $("#myform").validate({
        //    onfocusout: function(element) { $(element).valid(); },
            rules: {
                "userid": {
                    required: true
                },
                "skillid": {
                    required: true
                },
                "staffid": {
                    required: true
                }
            },
            messages: {
                "userid": {
                    required: "*请输入会员id*"
                },
               "skillid": {
                    required: ""
                },
                "staffid": {
                    required: ""
                }

            }

        })


        if ($.validator) {
            $.validator.prototype.elements = function () {
                var validator = this,
                    rulesCache = {};
                return $(this.currentForm)
                    .find("input, select, textarea")
                    .not(":submit, :reset, :image, [disabled]")
                    .not(this.settings.ignore)
                    .filter(function () {
                        if (!this.name && validator.settings.debug && window.console) {
                            console.error("%o has no name assigned", this);
                        }
                        rulesCache[this.name] = true;
                        return true;
                    });
            }
        }


    })


</script>

<script type="text/javascript">
    function addchoice() {
        var firsttr = $(" #hidfirsttr:hidden").get(0)
        var copyfirst = firsttr.cloneNode(true);
        copyfirst.removeAttribute("id")
        copyfirst.removeAttribute("hidden")
        copyfirst.setAttribute("class", "addtr")
        copyfirst.lastElementChild.lastElementChild.innerHTML = "0"
        $(copyfirst).insertBefore($("#lasttr"))

    }


    function delchoice() {

        $('.addtr:last').remove();
        totalprice();

    }


    function change(obj) {
      //  alert("进行选择职工")
        var skillid = parseFloat(obj.value)
        if (isNaN(skillid)) {
            var pricespan = obj.parentElement.parentElement.lastElementChild.lastElementChild
            pricespan.innerHTML = "0"
        } else {
            var pricespan = obj.parentElement.parentElement.lastElementChild.lastElementChild
            $.post("${ctx}/order/getpricebyskillid/" + skillid, function (result) {
                // alert(result.msg);
                if (result.code == 10000) {

                    var price = parseInt(result.data)
                    pricespan.innerHTML = "" + price
                }
            }, "json")
        }

        totalprice();

        $.post("${ctx}/order/getstaffsbyskillid/" + skillid, function (result) {

            if (result.code == 10000) {
                var aimselect = obj.parentElement.nextElementSibling.firstElementChild.nextElementSibling
                var selectnum = aimselect.children.length
              //  alert("selectnum"+selectnum)

                for (let i = 0; i < selectnum; i++) {
                    aimselect.removeChild(aimselect.firstElementChild)
                }
               //  alert("加入职工")
                var option0 = document.createElement("option");
              //  alert(option0)
                $(option0).val("");
                $(option0).text("请选择");
                aimselect.append(option0);

                for (let x of result.data) {

                    var option = document.createElement("option");
                    //转换DOM对象为JQ对象,好用JQ里面提供的方法 给option的value赋值
                    $(option).val(x.staffid);
                    //给option的text赋值,这就是你点开下拉框能够看到的东西
                    $(option).text(x.staffname);
                    //获取select 下拉框对象,并将option添加进select
                    aimselect.append(option);

                }


            }

        })

    }


    function totalprice() {
        var skillids = [];

        $("select[name='skillid']").each(function (j, item) {
            skillids.push(document.getElementsByName("skillid")[j].value)
        });

        $.ajax({
            url: "${ctx}/order/gettotalprice",
            type: "post",
            traditional: true,
            data: {"skillids": skillids},
            dataType: "json",
            success: function (result) {

                if (result.code == 10000) {
                    var totalprice = parseInt(result.data)
                    var totalspan = document.getElementById("cost")
                    totalspan.innerHTML = "" + totalprice

                }
            },
            error: function () {
                alert("请联系管理员")
            },


        })


    }


</script>
<style type="text/css">
    .myinput {
        width: 200px;
    }

    .mytd {
        /* border: solid black;*/
        width: 20%;
    }

    .mytr {
        border-top: 2px solid #dfc9b2;
        height: 55px;
    }

</style>
</body>
</html>
